<template>
  <view class="uni-container">
    <view class="uni-padding-wrap header">
      <text>市场唯一认证商品信息平台</text>
    </view>
    <view class="uni-padding-wrap search">
      <uni-search-bar></uni-search-bar>
    </view>

    <view class="uni-padding-wrap"> </view>
    <view class="uni-padding-wrap page-swiper">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            :indicator-dots="header.indicatorDots"
            :autoplay="header.autoplay"
            :interval="header.interval"
            :duration="header.duration"
          >
            <swiper-item>
              <view class="swiper-item">
                <image src="/static/shuijiao.jpg" mode=""></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <image src="/static/shuijiao.jpg" mode=""></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <image src="/static/shuijiao.jpg" mode=""></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <view class="uni-padding-wrap notice">
      <uni-notice-bar
        scrollable="true"
        single="true"
        :showGetMore="true"
        moreText="查看更多"
        showIcon="true"
        text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"
      ></uni-notice-bar>
    </view>
    <view class="uni-padding-wrap header-icon">
      <view class="icon-list">
        <view class="list-item">
          <view class="icon">
            <icon type="search" size="16" />
          </view>
          <view class="text">商家查询</view>
        </view>
        <view class="list-item"
          ><view class="icon">
            <icon type="search" size="16" />
          </view>
          <view class="text">商家查询</view></view
        >
        <view class="list-item"
          ><view class="icon">
            <icon type="search" size="16" />
          </view>
          <view class="text">商家查询</view></view
        >
        <view class="list-item"
          ><view class="icon">
            <icon type="search" size="16" />
          </view>
          <view class="text">商家查询</view></view
        >
      </view>
    </view>
    <view class="uni-padding-wrap card">
      <view class="card-box">
        <view class="header">
          <view class="hot">
            <text>热门商家</text>
          </view>
          <view class="more">
            <text>更多</text>
            <text class="goods-icon-jiantou1"></text>
          </view>
        </view>
        <view class="content">
          <view class="icon-list">
            <view class="list-item">
              <view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view>
            </view>
            <view class="list-item"
              ><view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view></view
            >
            <view class="list-item"
              ><view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view></view
            >
            <view class="list-item"
              ><view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view></view
            >
            <view class="list-item"
              ><view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view></view
            >
            <view class="list-item"
              ><view class="icon">
                <icon type="search" size="16" />
              </view>
              <view class="text">商家查询</view></view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="uni-padding-wrap img-box">
      <image src="/static/shuijiao.jpg" mode=""></image>
    </view>
    <view class="uni-padding-wrap goods-list">
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="left">
          <image
            style="width: 100%; height: 200rpx"
            src="/static/shuijiao.jpg"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="top">
            <text class="text">asddddddddddddasdddddddddddddddddd</text>
          </view>
          <view class="bottom">
            <view class="box">
              <view>130</view>
              <view>商家名称</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      background: ["color1", "color2", "color3"],
      header: {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
      },
      notice_board: {
        indicatorDots: false,
        autoplay: true,
        interval: 2000,
        duration: 500,
        vertical: true,
      },
    };
  },
  methods: {
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },
};
</script>

<style lang="scss">
@mixin around($grid: space-around) {
  display: flex;
  justify-content: $grid;
  align-items: center;
}
@mixin text {
  text-align: center;
}
.uni-container {
  background-color: #b8b0b0;
  height: 100vh;
  border: 1px solid red;
  overflow: auto;
  .header {
  }
  .search {
  }
  .page-swiper {
    .item {
      border: 1px solid red;
    }
    .swiper-notice {
      height: 40rpx;
    }
  }
  .notice {
    margin: 20rpx 0;
  }
  .header-icon {
    margin-bottom: 20rpx;

    .icon-list {
      @include around;
      background-color: white;
      border: 1px solid red;
      height: 60rpx;
      padding: 10rpx 0;
      .list-item {
        .icon {
          @include text;
        }
        .text {
          @include text;
          font-size: 20rpx;
        }
      }
    }
  }
  .card {
    .card-box {
      background-color: white;
      border: 1px solid red;
      .header {
        @include around(space-between);
        margin: 20rpx 20rpx;
      }
      .content {
        .icon-list {
          display: flex;
          flex-wrap: wrap;
          background-color: white;
          border: 1px solid red;
          padding: 10rpx 0;
          .list-item {
            width: 25%;
            .icon {
              @include text;
            }
            .text {
              @include text;
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
  .img-box {
    margin: 20rpx 0;
  }
  .goods-list {
    .goods-box {
      display: flex;
      margin-bottom: 30rpx;
      .left {
        width: 200rpx;
      }
      .right {
        flex: 1;
        padding: 0 20rpx;
        position: relative;
        .top {
          .text {
            word-break: break-all;
          }
        }
        .bottom {
          position: absolute;
          bottom: 0rpx;
          width: 100%;
          .box {
            display: flex;
            margin-right: 50rpx;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
